<template lang="html">
  <div class="person_wapper"
    v-loading="loading" 
    element-loading-text="拼命加载中">
    <form-panel class='form_wappers' :formData='formdata' @do-search='handlerSearch'></form-panel>
    <div class="count">
      <span>共搜索到<em>{{counts.all}}</em>条数据</span>
    </div>
    <table-panel class='table_wappers' :labelList='labelList' :tableData='tableData' @open-detail = 'openDetail'></table-panel>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager,next, sizes,jumper"
        :page-sizes="[10, 20, 30]"
        @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
        :page-size="pageSize"
        :current-page='pages'
        :total="counts.all"
        v-if="(counts.all / pageSize) > 1">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import formPanel from '../../components/common/form/formPanel.vue'
import tablePanel from '../../components/common/table/table.vue'
import { apiCaseList , getWordCloud } from '../../api/api'
export default {
  components : {
    formPanel,
    tablePanel,
  },
  data(){
    return {
      loading: false,
      counts : {
        all : 0,
        // person : 922,
        // detention : 333,
        // arrest : 222,
      },
      //搜索参数
      pageSize : 10,
      pages : 1,
      paramData : {},
      //搜索表单参数
      formdata : [
        {
          label : '案件编号',
          type : 'input',
          code : 'ajbh',
          modelData : '',
        },
        {
          label : '案件类别',
          type : 'select',
          code : 'ab',
          options : [
            {
              label : '谋杀',
              code : 'mousha'
            },
            {
              label : '抢劫',
              code : 'qiangjie'
            }
          ],
          modelData : '',
        },
        {
          label : '案件名称',
          type : 'input',
          code : 'ajmc',
          modelData : '',
        },
        {
          label : '案发时间',
          type : 'date',
          code : 'fasj',
          modelData : '',
        },
        {
          label : '发案区域',
          type : 'input',
          code : 'faddqx',
          modelData : '',
        },
        {
          label : '发案详址',
          type : 'input',
          code : 'fadd',
          modelData : '',
        },
        {
          label : '案件状态',
          type : 'select',
          code : 'ajstate',
          options : [
            {
              label : '已完成',
              code : 'mousha'
            },
            {
              label : '待处理',
              code : 'qiangjie'
            }
          ],
          modelData : '',
        },
        {
          label : '作案手段',
          type : 'input',
          code : 'zyzasd',
          modelData : '',
        },
        {
          label : '作案工具',
          type : 'input',
          code : 'zagjdm',
          modelData : '',
        },
        {
          label : '作案时机',
          type : 'select',
          code : 'xzsj',
          options: [],
          modelData : '',
        },
        {
          label : '作案人数',
          type : 'input',
          code : 'zars',
          modelData : '',
        },
        {
          label : '简要案情',
          type : 'textarea',
          code : 'zyaq',
          modelData : '',
        }
      ],
      //key带count和time的有排序功能
      labelList : {
         ajbh : '案件编号',
         ajmc : '案件名称',
         ab : '案件类别',
         fasjcz : '案发时间',
         fadd_qx : '案发区域',
         ajstate : '案件状态',
         xyr : '嫌疑人数',
         xj : '刑拘数',
         db : '逮捕数'
      },
      tableData :[],
    }
  },
  created() {
    this.changeWord('AB','ab','案件类别',1);
    this.changeWord('AJSTATE','ajstate','案件状态',6);
    this.changeWord('FADD_QX','faddqx','案发区域',4);
    // this.changeWord('sdtd','作案手段',7);
    this.changeWord('ZAGJ','zagjdm','作案工具',8);
    this.changeWord('XZSJ','xzsj','作案时机',9);
  },
  methods: {
    handlerSearch(data) {
      this.loading = true;
      // 判断入参是否改变  从而判断是否重置分页   
      if(data){
        this.paramData = data;
        this.pages = 1;
        this.pageSize = 10;
      }
      apiCaseList(this.paramData , this.pages , this.pageSize).then((res)=>{
        this.loading = false;
        let resData;
        if(res.data.state === 'success'){
          resData = JSON.parse(res.data.result);
          this.tableData = resData.list;
          this.counts.all = resData.totalCount;
        }
      })
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.pages = 1;
      this.handlerSearch()
    },
    handleCurrentChange(val) {
      this.pages = val
      this.handlerSearch()
    },
    openDetail(data){
      const {href} = this.$router.resolve({
         name : 'casedetail',
         query : {
           ajbh : data.ajbh
         }
        });
        window.open(href, '_blank');
    },
    // 获取字典
    changeWord(name,code,label,index){
      getWordCloud(name).then((res) => {
        let data = {
          label : label,
          type : 'select',
          code : code,
          options : [],
          modelData : '',
        };
        let _resdata = res.data;
        _resdata.forEach((elem) => {
          data.options.push({ label: elem.value , code: elem.key });
        });
        this.formdata.splice(index,1,data);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form_wappers,.count,.table_wappers {
  width: 80%;
  min-width: 1200px;
  margin: 0 auto;
}
.form_wappers {
  padding: 12px;
  background-color: #eee;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.count {
  margin: 12px auto;
  span {
    em {
      color: red;
    }
  }
}
.pagination {
  margin-left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  margin-top: 12px;
  margin-bottom: 20px;
}
</style>
